<template>
    <div>
        <div class="myLoginContainer">
            <div class="myLoginTitleContainer myAnTop">
                <img src="static/images/logo-big.png" alt=""/>
                <img src="static/images/stitle.png" alt="">
            </div>
            <div class="note" :style="note">
                <!-- old login
                <div class="myLoginContentContainer myAnBottom">
                    <input type="text" v-model="account" class="myAccount" id="myAccount" autofocus placeholder="用户名"/>
                    <input type="password" v-model="password" class="myPassword" id="myPassword" placeholder="密码"/>
                    <p class="myResponse">{{responseText}}</p>
                    <el-button type="primary" class="mySub" :loading="loading" @click="login">登 录</el-button>
                </div>
                -->
                <!--login框，表单+tab标签页的组合-->
                <div class="loginFrame">
                    <!--表单组件放在外面，标签栏在里面-->
                    <el-form ref="AccountForm" :model="loginform" class="demo-ruleForm login-container">
                        <!--tab标签-->
                        <!--<div class = "tabsUser">-->
                        <!--<el-tabs v-model = "activeName" @tab-click = "handleClick" class = "users" style = "height: 30px;font-size: 25px">-->
                        <!--<el-tab-pane label = "员工用户" name = "students" class = "tab1"></el-tab-pane>-->
                        <!--<el-tab-pane label = "管理员" name = "teacher" class = "tab2"></el-tab-pane>-->
                        <!--</el-tabs>-->
                        <!--</div>-->
                        <div class="formGroup">
                            <el-form-item label="账号" prop="user" class="form-label">
                                <el-input type="text" v-model="account" auto-complete="off" placeholder="请输入手机号码"
                                          class="form-control" id="myAccount"></el-input>
                            </el-form-item>
                            <el-form-item label="密码" prop="password" class="form-label">
                                <el-input type="password" v-model="password" auto-complete="off" placeholder="请输入密码"
                                          class="form-control" id="myPassword"></el-input>
                            </el-form-item>
                        </div>
                        <!--<div class = "remFor">-->
                        <!--<el-checkbox v-model = "checked" checked class = "remember">记住密码</el-checkbox>-->
                        <!--&lt;!&ndash;<a href ="#" class = "forget">忘记密码？</a>&ndash;&gt;-->
                        <!--&lt;!&ndash;<el>&ndash;&gt;-->
                        <!--</div>-->
                        <p class="myResponse" v-if="responseText.length>0">{{responseText}}</p>
                        <div class="formButton">
                            <el-form-item style="width:100%;" class="form-label">
                                <el-button type="primary" style="width:100%;" :loading="loading" @click="login">登 录
                                </el-button>
                            </el-form-item>
                        </div>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</template>

<style>
    body, div, span, header, footer, nav, section, aside, article, ul, dl, dt, dd, li, a, p, h1, h2, h3, h4, h5, i, b, textarea, button, input, select {
        padding: 0;
        margin: 0;
        list-style: none;
        font-style: normal;
        text-decoration: none;
        border: none;
        color: #313131;
        box-sizing: border-box;
        font-weight: lighter;
        font-family: 'Microsoft YaHei';
        -webkit-tap-highlight-color: transparent;
        outline: none;
         & :focus {
        outline: none;
           }
    }

    html {
        height: 100%;
        width: 100%;
    }

    body {
        height: 100%;
        width: 100%;

        background-size: 100% 100%;
    }

    .myAnTop {
        position: absolute;
        opacity: 0;
        animation: moveBottom .5s ease-out forwards;
    }

    @keyframes moveBottom {
        from {
            top: -100px;
            opacity: 0
        }
        to {
            top: 0px;
            opacity: 1
        }
    }

    .myAnBottom {
        position: absolute;
        opacity: 0;
        animation: moveTop .5s .3s ease-out forwards;
    }

    @keyframes moveTop {
        from {
            top: 100px;
            opacity: 0
        }
        to {
            top: 200px;
            opacity: 1
        }
    }

    .myLoginContainer {
        width: 520px;
        height: 600px;
        position: absolute;
        left: 50%;
        margin-left: -260px;
        top: 50%;
        margin-top: -380px;
    }

    .myLoginTitleContainer {
        text-align: center;
    }

    .myLoginTitleContainer > img {
        margin-bottom: 20px;
    }

    .myLoginContentContainer {
        width: 520px;
        height: 320px;
        background: #fff;
        margin-top: 40px;
        padding: 50px;
        box-sizing: border-box;
    }

    .myAccount, .myPassword {
        width: 100%;
        height: 45px;
        padding-left: 35px;
        box-sizing: border-box;
        border: 1px solid #dbdbdb;
        color: #8290a3;
        font-size: 14px;
        font-weight: 500;
        margin-bottom: 15px;
    }

    .myAccount {
        background: url("/static/images/userIcon.png") no-repeat 10px 10px;
    }

    .myPassword {
        background: url("/static/images/userLock.png") no-repeat 10px 10px;
    }

    .mySub {
        background: #45b6af;
        width: 100%;
        height: 45px;
        color: #fff;
        font-size: 14px;
        font-weight: 500;
    }

    .mySub:hover {
        background: #33ceba;
        cursor: pointer;
    }

    .myResponse {
        color: #f00;
        height: 30px;
        font-size: 12px;
        font-weight: 500;
    }

    .login-container {
        -webkit-border-radius: 5px;
        border-radius: 15px;
        -moz-border-radius: 5px;
        background-clip: padding-box;
        margin: 240px auto;
        width: 350px;
        padding: 35px 35px 15px 35px;
        background: rgba(255, 255, 255, 0.7);
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6;
    }

    label {
        width: 70px;
        text-align: left;
    }

    .form-label {
        font-weight: bold;
    }

    .form-control {
        width: 270px;
        flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
    }

    .remember {
        width: 250px;
        text-align: left;
    }

    .forget {
        width: 500px;
        text-align: right;
        font-size: 12px;
        font-family: PingFang SC;

    }

    .remFor {
        margin-bottom: 10px;
        padding-bottom: 10px;
    }

    .tabsUser {
        display: inline-block;
        margin-left: 0px;
        margin-right: 0px;
        text-align: center;
        font-size: 25px;
    }
</style>

<script>
    import '../../../static/global/plugins/backstretch/jquery.backstretch.js';

    import {login, getMenu} from '@/api/login';
    import {setToken, setRegion, setUesrId, setUesrInfo} from '@/utils/localstorage';

    export default {

        data() {
            return {
                // password:"123456",
                // account:15215160999,
                password: "",
                account: "",
                responseText: "",
                loading: false,
                checked: false,
                loginform: {
                    faccount: "",
                    fpassword: ""
                },
                note: {
                    // position:"absolute",
                    top: "0px",
                    left: "0px",
                    width: "100%",
                    height: "100%"
                },
            }
        },
        mounted() {
            let vm = this;
            document.title = '登录';
            $.backstretch([
                "/static/images/test/1.jpg",
                "/static/images/test/2.jpg",
                "/static/images/test/3.jpg"
            ], {
                fade: 1000,
                duration: 5000
            });
            document.getElementById("myPassword").onkeydown = function (event) {
                var e = event || window.event || arguments.callee.caller.arguments[0];
                if (e && e.keyCode == 13) {
                    vm.login();
                }
            };
        },
        beforeRouteLeave(to, from, next) {
            $.backstretch('pause');
            next();
        },
        methods: {
            login: function () {
                this.loading = true;

                function SHA256(s) {
                    var chrsz = 8;
                    var hexcase = 0;

                    function safe_add(x, y) {
                        var lsw = (x & 0xFFFF) + (y & 0xFFFF);
                        var msw = (x >> 16) + (y >> 16) + (lsw >> 16);
                        return (msw << 16) | (lsw & 0xFFFF);
                    }

                    function S(X, n) {
                        return (X >>> n) | (X << (32 - n));
                    }

                    function R(X, n) {
                        return (X >>> n);
                    }

                    function Ch(x, y, z) {
                        return ((x & y) ^ ((~x) & z));
                    }

                    function Maj(x, y, z) {
                        return ((x & y) ^ (x & z) ^ (y & z));
                    }

                    function Sigma0256(x) {
                        return (S(x, 2) ^ S(x, 13) ^ S(x, 22));
                    }

                    function Sigma1256(x) {
                        return (S(x, 6) ^ S(x, 11) ^ S(x, 25));
                    }

                    function Gamma0256(x) {
                        return (S(x, 7) ^ S(x, 18) ^ R(x, 3));
                    }

                    function Gamma1256(x) {
                        return (S(x, 17) ^ S(x, 19) ^ R(x, 10));
                    }

                    function core_sha256(m, l) {
                        var K = new Array(0x428A2F98, 0x71374491, 0xB5C0FBCF, 0xE9B5DBA5, 0x3956C25B, 0x59F111F1, 0x923F82A4, 0xAB1C5ED5, 0xD807AA98, 0x12835B01, 0x243185BE, 0x550C7DC3, 0x72BE5D74, 0x80DEB1FE, 0x9BDC06A7, 0xC19BF174, 0xE49B69C1, 0xEFBE4786, 0xFC19DC6, 0x240CA1CC, 0x2DE92C6F, 0x4A7484AA, 0x5CB0A9DC, 0x76F988DA, 0x983E5152, 0xA831C66D, 0xB00327C8, 0xBF597FC7, 0xC6E00BF3, 0xD5A79147, 0x6CA6351, 0x14292967, 0x27B70A85, 0x2E1B2138, 0x4D2C6DFC, 0x53380D13, 0x650A7354, 0x766A0ABB, 0x81C2C92E, 0x92722C85, 0xA2BFE8A1, 0xA81A664B, 0xC24B8B70, 0xC76C51A3, 0xD192E819, 0xD6990624, 0xF40E3585, 0x106AA070, 0x19A4C116, 0x1E376C08, 0x2748774C, 0x34B0BCB5, 0x391C0CB3, 0x4ED8AA4A, 0x5B9CCA4F, 0x682E6FF3, 0x748F82EE, 0x78A5636F, 0x84C87814, 0x8CC70208, 0x90BEFFFA, 0xA4506CEB, 0xBEF9A3F7, 0xC67178F2);
                        var HASH = new Array(0x6A09E667, 0xBB67AE85, 0x3C6EF372, 0xA54FF53A, 0x510E527F, 0x9B05688C, 0x1F83D9AB, 0x5BE0CD19);
                        var W = new Array(64);
                        var a, b, c, d, e, f, g, h, i, j;
                        var T1, T2;
                        m[l >> 5] |= 0x80 << (24 - l % 32);
                        m[((l + 64 >> 9) << 4) + 15] = l;
                        for (var i = 0; i < m.length; i += 16) {
                            a = HASH[0];
                            b = HASH[1];
                            c = HASH[2];
                            d = HASH[3];
                            e = HASH[4];
                            f = HASH[5];
                            g = HASH[6];
                            h = HASH[7];
                            for (var j = 0; j < 64; j++) {
                                if (j < 16) W[j] = m[j + i];
                                else W[j] = safe_add(safe_add(safe_add(Gamma1256(W[j - 2]), W[j - 7]), Gamma0256(W[j - 15])), W[j - 16]);
                                T1 = safe_add(safe_add(safe_add(safe_add(h, Sigma1256(e)), Ch(e, f, g)), K[j]), W[j]);
                                T2 = safe_add(Sigma0256(a), Maj(a, b, c));
                                h = g;
                                g = f;
                                f = e;
                                e = safe_add(d, T1);
                                d = c;
                                c = b;
                                b = a;
                                a = safe_add(T1, T2);
                            }
                            HASH[0] = safe_add(a, HASH[0]);
                            HASH[1] = safe_add(b, HASH[1]);
                            HASH[2] = safe_add(c, HASH[2]);
                            HASH[3] = safe_add(d, HASH[3]);
                            HASH[4] = safe_add(e, HASH[4]);
                            HASH[5] = safe_add(f, HASH[5]);
                            HASH[6] = safe_add(g, HASH[6]);
                            HASH[7] = safe_add(h, HASH[7]);
                        }
                        return HASH;
                    }

                    function str2binb(str) {
                        var bin = Array();
                        var mask = (1 << chrsz) - 1;
                        for (var i = 0; i < str.length * chrsz; i += chrsz) {
                            bin[i >> 5] |= (str.charCodeAt(i / chrsz) & mask) << (24 - i % 32);
                        }
                        return bin;
                    }

                    function Utf8Encode(string) {
                        string = string.replace(/\r\n/g, "\n");
                        var utftext = "";
                        for (var n = 0; n < string.length; n++) {
                            var c = string.charCodeAt(n);
                            if (c < 128) {
                                utftext += String.fromCharCode(c);
                            }
                            else if ((c > 127) && (c < 2048)) {
                                utftext += String.fromCharCode((c >> 6) | 192);
                                utftext += String.fromCharCode((c & 63) | 128);
                            }
                            else {
                                utftext += String.fromCharCode((c >> 12) | 224);
                                utftext += String.fromCharCode(((c >> 6) & 63) | 128);
                                utftext += String.fromCharCode((c & 63) | 128);
                            }
                        }
                        return utftext;
                    }

                    function binb2hex(binarray) {
                        var hex_tab = hexcase ? "0123456789ABCDEF" : "0123456789abcdef";
                        var str = "";
                        for (var i = 0; i < binarray.length * 4; i++) {
                            str += hex_tab.charAt((binarray[i >> 2] >> ((3 - i % 4) * 8 + 4)) & 0xF) +
                                hex_tab.charAt((binarray[i >> 2] >> ((3 - i % 4) * 8)) & 0xF);
                        }
                        return str;
                    }

                    s = Utf8Encode(s);
                    return binb2hex(core_sha256(str2binb(s), s.length * chrsz));
                }

                let vm = this;
                login(vm.account, SHA256(vm.password), 2)
                    .then(response => {
                        let res = response.data;
                        vm.responseText = "";
                        setToken(res.access_token);
                        setRegion(res.region);
                        setUesrId(res.user_id);//登录缓存用户id
                        window.localStorage.userInfo = JSON.stringify(res);
                        vm.onGetMenu(res.duty_id);//拉取左侧菜单列表
                        // vm.loading=false;
                        // vm.$router.push({ path: '/home'})
                    })
                    .catch(error => {
                            vm.responseText = error.response.data.error_msg;
                            vm.loading = false;
                        }
                    );
            },
            onGetMenu(e) {
                let vm = this;
                if (e) {
                    getMenu(e).then(response => {
                        vm.loading = false;
                        let res = response.data;
                        if (res.menu.length == 0) {
                            vm.$message.error("该用户无权限进入！");
                            return;
                        }
                        window.localStorage.navmenu = JSON.stringify(res.menu);
                        window.localStorage.btnList = JSON.stringify(res.btns);
                        vm.$router.push({path: '/home'})
                    }).catch(error => {
                        console.log(error)
                    })
                }
            }
        }
    }

</script>





